<template>
  <div class="DBEnterWeChat">
    <el-card>
      <div class="table-wrap">
        <h3 style="margin-top: 0;">日指标</h3>
        <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            prop="dimension"
            label="">
          </el-table-column>
          <el-table-column
            prop="pv"
            label="Page View">
          </el-table-column>
          <el-table-column
            prop="uv"
            label="Unique Visitor">
          </el-table-column>
          <el-table-column
            prop="bounce_rate"
            label="跳出率">
          </el-table-column>
          <el-table-column
            prop="avg"
            label="平均访问时长">
          </el-table-column>
          <el-table-column
            prop="dau"
            label="DAU">
          </el-table-column>
          <el-table-column
            prop="dau_rate"
            label="日活跃率">
          </el-table-column>
          <el-table-column
            prop=""
            label="日留存(关注)">
          </el-table-column>
          <el-table-column
            prop=""
            label="日留存(注册)">
          </el-table-column>
        </el-table>
        <h3>月指标</h3>
        <el-table
          :data="tableData1"
          border
          style="width: 100%">
          <el-table-column
            prop="dimension">
          </el-table-column>
          <el-table-column
            prop="mav"
            label="MAU">
          </el-table-column>
          <el-table-column
            prop="mau_rate"
            label="月活跃率">
          </el-table-column>
          <el-table-column
            prop=""
            label="月留存(关注)">
          </el-table-column>
          <el-table-column
            prop=""
            label="月留存(注册)">
          </el-table-column>
        </el-table>
      </div>
      <div class="btn-wrap">
        <h3>时间：</h3>
        <el-button-group class="btn-part">
          <el-button :class="{'active-btn': currentIndex === 1}" @click="toggleIndex(1)">过去7天</el-button>
          <el-button :class="{'active-btn': currentIndex === 2}" @click="toggleIndex(2)">过去30天</el-button>
        </el-button-group>
      </div>
      <div class="select-wrap">
        <div class="title">趋势分析</div>
        <div class="select-box box">
          <el-select v-model="value" placeholder="请选择"
                     @change="changeSelect">
            <el-option
              v-for="item in buttonArr"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="eCharts-wrap">
        <div class="echarts-part">
          <div class="echarts-select">
            <div class="title">走势图对比</div>
            <div class="select">
              <el-select v-model="value1" placeholder="请选择"
                         multiple
                         collapse-tags
                         :multiple-limit="maxNumber"
                         @change="changeSelect1">
                <el-option
                  v-for="item in buttonArr1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="nodata" v-if="showNoData.lineECharts">No Data</div>
          <div class="chart lineECharts"  v-loading="loading.lineECharts"></div>
        </div>
        <div class="echarts-part">
          <div class="title" style="text-align:center;">用户分布图</div>
          <div class="nodata" v-if="showNoData.barECharts">No Data</div>
          <div class="chart barECharts"  v-loading="loading.barECharts"></div>
        </div>
      </div>
      <div class="table-wrap-two">
        <el-table
          :data="tableData2"
          border
          style="width: 100%">
          <el-table-column
            type="index"
            width="30">
          </el-table-column>
          <el-table-column
            prop="dimension"
            label="时间段">
          </el-table-column>
          <el-table-column
            prop="title"
            label="预约报修">
          </el-table-column>
          <el-table-column
            prop="address"
            label="在线咨询">
          </el-table-column>
          <el-table-column
            prop="query"
            label="保修/配置/驱动">
          </el-table-column>
          <el-table-column
            prop="title"
            label="官方翻新机查询">
          </el-table-column>
          <el-table-column
            prop="title"
            label="超级联想课">
          </el-table-column>
          <el-table-column
            prop="title"
            label="个人中心">
          </el-table-column>
          <el-table-column
            prop="date"
            label="我的">
          </el-table-column>
          <el-table-column
            prop="date"
            label="渠道分析">
          </el-table-column>
          <el-table-column
            prop="date"
            label="用户分析">
          </el-table-column>
        </el-table>
      </div>
      <div class="eCharts-bottom">
        <div class="echarts-part">
          <div class="title">页面上下游分析</div>
          <div class="nodata" v-if="showNoData.sankeyECharts">No Data</div>
          <div class="chart sankeyECharts"  v-loading="loading.sankeyECharts"></div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import {getUsername} from '../../../../../utils/auth'
  import {getLineData,getBarData,WeChatDailyIndex,WeChatMonthlyIndex,WeChatHourIndex} from '../../api/eServiceSearch'

  export default {
    name: "DBWeChat",
    data() {
      return {
        appKey:["XLI4P384IX73"],
        testPort: '',
        getUrl: '../../../../../../static/json',
        value: 'pv',
        value1: ['user_repairs', 'user_advisory'],
        buttonArr: [
          {label: 'Page View', value: 'pv'},
          {label: 'Unique Visitor', value: 'uv'},
          {label: '跳出率', value: 'bounce_rate'},
          {label: 'DAU(日活)', value: 'dau'},
          {label: 'MAU(月活)', value: 'mau'},
          {label: '日活跃率', value: 'dau_rate'},
          {label: '月活跃率', value: 'mau_rate'},
          {label: '平均访问时长', value: 'avg'},
          {label: '日留存', value: 'day_retention'},
          {label: '月留存', value: 'month_retention'}
        ],
        buttonArr1: [
          {label: '预约报修', value: 'user_repairs'},
          {label: '在线咨询', value: 'user_advisory'},
          {label: '保修配置驱动', value: 'user_deploy'},
          {label: '官方翻新机查询', value: 'user_branch'},
          {label: '联想超级课', value: 'user_class'},
          {label: '个人中心', value: 'personal_center'},
          {label: '我的购机需求', value: 'user_demand'},
          {label: '渠道分析', value: '渠道分析'},
          {label: '用户分析', value: '用户分析'}
        ],
        echartsObj: {
          lineECharts: '',
          barECharts: '',
          sankeyECharts: '',
        },
        loading: {
          lineECharts: false,
          barECharts: false,
          sankeyECharts: false,
        },
        showNoData: {
          lineECharts: false,
          barECharts: false,
          sankeyECharts: false,
        },
        columnList: [],
        tableData: [],
        columnList1: [],
        tableData1: [],
        currentIndex: 1,
        columnList2: [],
        tableData2: [],
        optionColors: ['#0090e9', '#6be6c1', '#59c4e6', '#ffb980', '#b692df'],
        maxNumber: 2
      }
    },
    methods: {
      initEchartsDom() {
        this.echartsObj.lineECharts = this.echarts.init(document.getElementsByClassName('lineECharts')[0], null, {renderer: 'canvas'})
        this.echartsObj.barECharts = this.echarts.init(document.getElementsByClassName('barECharts')[0], null, {renderer: 'canvas'})
        this.echartsObj.sankeyECharts = this.echarts.init(document.getElementsByClassName('sankeyECharts')[0], null, {renderer: 'canvas'})
      },
      toggleIndex(index) {
        if (index === this.currentIndex) {
          return
        }
        this.currentIndex = index
        this.loadAllCharts()
        this.getTableDataHour()
      },
      // table-modules
      async getTableDataDaily(){
        let params = {
          appKey: this.appKey,
          columnList: this.columnList
        }
        try {
          let res = await WeChatDailyIndex(params)
          if (res.status === 200) {
            let resData = res.data
            // this.tableData= eServiceTableMap(resData.data)
            this.tableData = resData.data
          }
        } catch (error) {
          console.log(error)
        }
      },
      async getTableDataMonthly(){
        let params = {
          appKey: this.appKey,
          columnList: this.columnList1
        }
        try {
          let res = await WeChatMonthlyIndex(params)
          if (res.status === 200) {
            let resData = res.data
            this.tableData1 = resData.data
          }
        } catch (error) {
          console.log(error)
        }
      },
      async getTableDataHour(){
        let params = {
          appKey: this.appKey,
          columnList: this.columnList2,
          time_: this.currentIndex === 1?'7天':'30天',
          index: this.value
        }
        try {
          let res = await WeChatMonthlyIndex(params)
          if (res.status === 200) {
            let resData = res.data
            this.tableData2 = resData.data
          }
        } catch (error) {
          console.log(error)
        }
      },
      //  echarts-module
      drawEcharts(paramsData, noData, echartsObj, echartsType, isSmooth, yAxisName, color) {
        if (paramsData.series && paramsData.series.length !== 0) {
          let xAxisData = {
            type: 'category',
            axisTick: {
              show: false
            },
            axisLine: {
              // show: false
            },
            axisLabel: {
              interval: 0,
              fontFamily: 'HelveticaNeue',
              fontSize: 10,
              color: '#999999'
            },
            data: paramsData.label.data
          }
          let series = paramsData.series.map(item => {
            return {
              name: item.name,
              data: item.data,
              type: echartsType,
              barGap: 0,
              smooth: isSmooth,
              barMaxWidth: 30,
              markPoint: {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              }
            }
          })
          let option = {
            grid: {
              left: '3%',
              right: '3%',
              bottom: '3%',
              containLabel: true
            },
            color: color,
            xAxis: xAxisData,
            yAxis: {
              type: 'value',
              name: yAxisName,
              axisLabel: {
                fontFamily: 'HelveticaNeue',
                fontSize: 10,
                color: '#999999'
              },
              axisLine: {
                // show: false
              },
              splitLine: {
                show: false
              },
              axisTick: {
                show: false
              }
            },
            tooltip: {
              confine: true,
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },
              backgroundColor: 'rgba(255,255,255,1)',
              padding: [5, 10],
              textStyle: {
                color: '#7588E4'
              },
              extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
            },
            series: series
          }
          this.showNoData[noData] = false
          echartsObj.clear()
          echartsObj.setOption(option)
        } else {
          echartsObj.clear()
          this.showNoData[noData] = true
        }
      },

      drawEchartsSankey(paramsData){
        let data = paramsData.nodes, links = paramsData.links
        let option = {
          tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'

          },
          series: [
            {
              type: 'sankey',
              layout: 'none',
              data: data,
              links: links,
              focusNodeAdjacency: true,
              itemStyle: {
                normal: {
                  borderWidth: 1,
                  borderColor: '#aaa'
                }
              },
              lineStyle: {
                normal: {
                  curveness: 0.5
                }
              }
            }
          ]
        }
        this.echartsObj.sankeyECharts.clear()
        this.echartsObj.sankeyECharts.setOption(option)
      },
      async getDataEchartsLine(params) {
        this.loading.lineECharts = true
        let res = await getLineData(params)
        let resData = res.data.data
        setTimeout(() => {
          this.loading.lineECharts = false
          this.drawEcharts(resData, 'lineECharts', this.echartsObj.lineECharts, 'line', true, '次数', this.optionColors)
        }, 0)
      },
      async getDataEchartsBar(params) {
        this.loading.barECharts = true
        let res = await getBarData(params)
        let resData = res.data.data
        setTimeout(() => {
          this.loading.barECharts = false
          this.drawEcharts(resData, 'barECharts', this.echartsObj.barECharts, 'bar', false, '%', this.optionColors)
        }, 0)
      },
      getDataEchartsSankey(){
        const _this = this
        this.loading.sankeyECharts = true
        this.http.get(`${this.getUrl}/Sankey.json`).then(res => {
          let resData = res.data
          _this.loading.sankeyECharts = false
          _this.drawEchartsSankey(resData)
        })
      },
      loadAllCharts(){
        let paramsLine = {
          appKey: this.appKey,
          time: this.currentIndex === 1?'7天':'30天',
          index: [this.value],
          module: this.value1
        }
        let paramsBar = {
          appKey: this.appKey,
          time_interval: this.currentIndex === 1?'7天':'30天'
        }
        this.getDataEchartsLine(paramsLine);
        this.getDataEchartsBar(paramsBar);
        // this.getDataEchartsSankey();
      },
      // 联动部分
      changeSelect(){
        this.loadAllCharts()
      },
      changeSelect1(){
        this.loadAllCharts()
      },
      echartsResize(){
        setTimeout(() => {
          this.echartsObj.lineECharts.resize()
          this.echartsObj.barECharts.resize()
          // this.echartsObj.sankeyECharts.resize()
        }, 200)
      },
    },
    computed: {
      ...mapGetters(['sidebar'])
    },
    watch: {
      'sidebar.opened': function () {
        this.echartsResize()
      }
    },
    mounted(){
      this.getTableDataDaily();
      this.getTableDataMonthly();
      this.getTableDataHour();
      this.initEchartsDom();
      this.loadAllCharts();
      window.onresize = () => {
        this.echartsResize()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .DBEnterWeChat {
    .nodata {
      width: 100%;
      height: 100%;
      text-align: center;
      position: relative;
      top: 100px;
      z-index: 1;
    }
    .title {
      margin-right: 15px;
      font-family: PingFang-SC-Bold;
      font-size: 20px;
      color: #333333;
      font-weight: bold;
    }
    .table-wrap {}
    .btn-wrap {
      margin: 15px 0;
      h3{
        float:left;
        display:inline-block;
      }
      .btn-part{
        display:inline-block;
        margin: 10px 0 0 10px;
        .el-button {
          padding: 8px;
          color: #333;
          background-color: #fff;
          width: 144px;
          margin: 0 5px;
        }
        .active-btn {
          background-color: #0090e9;
          color: #fff;
        }
      }
    }
    .button-wrap {
      margin-top: 20px;
      .box {
        display: inline-block;
      }
      .button-box {
        margin-right: 15px;
      }
    }
    .eCharts-wrap {
      margin-top: 20px;
      .echarts-part {
        .echarts-select{
          text-align:center;
          .title{
            display: inline-block;
          }
          .select{
            display: inline-block;
          }
        }
        .chart {
          width: 100%;
          height: 35vh;
        }
      }
    }
    .select-wrap {
      clear: both;
      margin-top: 20px;
      .title{
        display: inline-block;
      }
      .box {
        display: inline-block;
      }
      .select-box {
        margin-left: 15px;
      }
    }
    .table-wrap-two {
      margin-top: 15px;
    }
    .eCharts-bottom {
      display: none;
      margin-top: 20px;
      .title {
        .eCharts-bottom {
          display: none; /* 没有接口，暂时去掉*/
          margin-top: 20px;
          .title {
            font-family: PingFang-SC-Bold;
            font-size: 20px;
            color: #333333;
            font-weight: bold;
          }
          .chart {
            width: 100%;
            height: 40vh;
          }
        }
      }}}
</style>
